import React from 'react';
import img1 from '../../img/图钉.png';
import img2 from '../../img/u1717.png';
import img3 from '../../img/u1727.png';
import './qiuzhu.less';
import { ChatO } from '@react-vant/icons';

export default function Qiuzhu() {
  return (
    <div className="qiuzhu">
      {/* 热门标题 */}
      <div className="qiuzhu-ding1">
        <div className="qiuzhu-ding-biaoqian">
          <img src={img1} alt="" style={{ height: '27px' }} />
          <span>关于近期服务器故障的说明</span>
        </div>
        <hr />
        <div className="qiuzhu-ding-biaoqian">
          <img src={img1} alt="" style={{ height: '27px' }} />
          <span>关于近期存在用户提现功能无法正常使用反馈</span>
        </div>
        <hr />
        <div className="qiuzhu-ding-biaoqian">
          <img src={img1} alt="" style={{ height: '27px' }} />
          <span>欢迎加入OMINI,为世界美好出一份力</span>
        </div>
        <hr />
      </div>
      <div>
        {/* 热门内容 */}
        <div className="qiuzhu-content">
          {/* 热门内容上 */}
          <div className="qiuzhu-content-top">
            <span>奶茶究竟怎么扔？</span>
          </div>
          {/* 热门内容中 */}
          <div className="qiuzhu-content-zhong">
            {/* 热门内容中左 */}
            <div className="letf">
              <a href="#">
                RT,一杯珍珠奶茶有珍珠有杯子有奶茶还有吸管,应该怎么分类才对？
              </a>
            </div>
            {/* 热门内容中右 */}
            <div className="right">
              <img src={img2} alt="" />
            </div>
          </div>
          {/* 热门内容下 */}
          <div className="qiuzhu-content-xia">
            {/* 热门内容下左 */}
            <div className="qiuzhu-content-xia-zuo">
              <img src={img3} alt="" />
              <span>OMINI.BASS</span>
            </div>
            {/* 热门内容下右 */}
            <div className="qiuzhu-content-xia-you">
              <ChatO />
              <span>25684</span>
            </div>
          </div>
        </div>
        <hr />
      </div>
      <div>
        {/* 热门内容 */}
        <div className="qiuzhu-content">
          {/* 热门内容上 */}
          <div className="qiuzhu-content-top">
            <span>奶茶究竟怎么扔？</span>
          </div>
          {/* 热门内容中 */}
          <div className="qiuzhu-content-zhong">
            {/* 热门内容中左 */}
            <div className="letf">
              <a href="#">
                RT,一杯珍珠奶茶有珍珠有杯子有奶茶还有吸管,应该怎么分类才对？
              </a>
            </div>
            {/* 热门内容中右 */}
            <div className="right">
              <img src={img2} alt="" />
            </div>
          </div>
          {/* 热门内容下 */}
          <div className="qiuzhu-content-xia">
            {/* 热门内容下左 */}
            <div className="qiuzhu-content-xia-zuo">
              <img src={img3} alt="" />
              <span>OMINI.BASS</span>
            </div>
            {/* 热门内容下右 */}
            <div className="qiuzhu-content-xia-you">
              <ChatO />
              <span>25684</span>
            </div>
          </div>
        </div>
        <hr />
      </div>

      <div>
        {/* 热门内容 */}
        <div className="qiuzhu-content">
          {/* 热门内容上 */}
          <div className="qiuzhu-content-top">
            <span>奶茶究竟怎么扔？</span>
          </div>
          {/* 热门内容中 */}
          <div className="qiuzhu-content-zhong">
            {/* 热门内容中左 */}
            <div className="letf">
              <a href="#">
                RT,一杯珍珠奶茶有珍珠有杯子有奶茶还有吸管,应该怎么分类才对？
              </a>
            </div>
            {/* 热门内容中右 */}
            <div className="right">
              <img src={img2} alt="" />
            </div>
          </div>
          {/* 热门内容下 */}
          <div className="qiuzhu-content-xia">
            {/* 热门内容下左 */}
            <div className="qiuzhu-content-xia-zuo">
              <img src={img3} alt="" />
              <span>OMINI.BASS</span>
            </div>
            {/* 热门内容下右 */}
            <div className="qiuzhu-content-xia-you">
              <ChatO />
              <span>25684</span>
            </div>
          </div>
        </div>
        <hr />
      </div>

      <div>
        {/* 热门内容 */}
        <div className="qiuzhu-content">
          {/* 热门内容上 */}
          <div className="qiuzhu-content-top">
            <span>奶茶究竟怎么扔？</span>
          </div>
          {/* 热门内容中 */}
          <div className="qiuzhu-content-zhong">
            {/* 热门内容中左 */}
            <div className="letf">
              <a href="#">
                RT,一杯珍珠奶茶有珍珠有杯子有奶茶还有吸管,应该怎么分类才对？
              </a>
            </div>
            {/* 热门内容中右 */}
            <div className="right">
              <img src={img2} alt="" />
            </div>
          </div>
          {/* 热门内容下 */}
          <div className="qiuzhu-content-xia">
            {/* 热门内容下左 */}
            <div className="qiuzhu-content-xia-zuo">
              <img src={img3} alt="" />
              <span>OMINI.BASS</span>
            </div>
            {/* 热门内容下右 */}
            <div className="qiuzhu-content-xia-you">
              <ChatO />
              <span>25684</span>
            </div>
          </div>
        </div>
        <hr />
      </div>
    </div>
  );
}
